<template>
  <el-row :gutter="10">
    <el-col :xs="24" :sm="12" :md="8" :lg="6">
      <CommonCard title="总销售额" :value="`¥ ${homeData.salesTotal}`">
        <span class="week-text"
          >周同比&nbsp;&nbsp;{{
            Math.abs(homeData.salesGrowthLastMonth)
          }}%&nbsp;&nbsp;
          <svg
            t="1628565785696"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="10465"
            width="12"
            height="12"
            v-if="homeData.salesGrowthLastMonth > 0"
          >
            <path
              d="M660.650667 1024V438.912h210.986666L520.021333 0 168.405333 438.912H379.306667V1024z"
              fill="#d81e06"
            ></path>
          </svg>
          <svg
            t="1628565809446"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="11393"
            width="12"
            height="12"
            v-else
          >
            <path
              d="M384.65536 20.48v561.68448H182.14912L519.65952 1003.52l337.59232-421.35552h-202.5472V20.48z"
              fill="#1afa29"
            ></path>
          </svg>
        </span>
        <span class="day-text"
          >日同比&nbsp;&nbsp;{{
            Math.abs(homeData.salesGrowthLastDay)
          }}%&nbsp;&nbsp;
          <svg
            t="1628565785696"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="10465"
            width="12"
            height="12"
            v-if="homeData.salesGrowthLastDay > 0"
          >
            <path
              d="M660.650667 1024V438.912h210.986666L520.021333 0 168.405333 438.912H379.306667V1024z"
              fill="#d81e06"
            ></path>
          </svg>
          <svg
            t="1628565809446"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="11393"
            width="12"
            height="12"
            v-else
          >
            <path
              d="M384.65536 20.48v561.68448H182.14912L519.65952 1003.52l337.59232-421.35552h-202.5472V20.48z"
              fill="#1afa29"
            ></path>
          </svg>
        </span>
        <div slot="footer">日销售额￥{{ homeData.salesToday }}</div>
      </CommonCard>
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="6">
      <CommonCard title="访问量" :value="`${homeData.visitTotal}`">
        <LineChart />
        <div slot="footer">日访问量&nbsp;{{ homeData.visitToday }}</div>
      </CommonCard>
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="6">
      <CommonCard title="支付笔数" :value="`${homeData.payTotal}`">
        <BarChart />
        <div slot="footer">转化率&nbsp;{{ homeData.payRate }}%</div>
      </CommonCard>
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="6">
      <CommonCard title="运营活动效果" :value="`${homeData.activityRate}%`">
        <ReBarChart />
        <div slot="footer" class="rechart-footer">
          <span class="week-text"
            >周同比&nbsp;{{ Math.abs(homeData.activityGrowthLastMonth) }}%
            <svg
              t="1628565785696"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="10465"
              width="12"
              height="12"
              v-if="homeData.activityGrowthLastMonth > 0"
            >
              <path
                d="M660.650667 1024V438.912h210.986666L520.021333 0 168.405333 438.912H379.306667V1024z"
                fill="#d81e06"
              ></path>
            </svg>
            <svg
              t="1628565809446"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="11393"
              width="12"
              height="12"
              v-else
            >
              <path
                d="M384.65536 20.48v561.68448H182.14912L519.65952 1003.52l337.59232-421.35552h-202.5472V20.48z"
                fill="#1afa29"
              ></path>
            </svg>
          </span>
          <span class="day-text"
            >日同比&nbsp;{{ Math.abs(homeData.activityGrowthLastDay) }}%
            <svg
              t="1628565785696"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="10465"
              width="12"
              height="12"
              v-if="homeData.activityGrowthLastDay > 0"
            >
              <path
                d="M660.650667 1024V438.912h210.986666L520.021333 0 168.405333 438.912H379.306667V1024z"
                fill="#d81e06"
              ></path>
            </svg>
            <svg
              t="1628565809446"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="11393"
              width="12"
              height="12"
              v-else
            >
              <path
                d="M384.65536 20.48v561.68448H182.14912L519.65952 1003.52l337.59232-421.35552h-202.5472V20.48z"
                fill="#1afa29"
              ></path>
            </svg>
          </span>
        </div>
      </CommonCard>
    </el-col>
  </el-row>
</template>

<script>
import CommonCard from './commonCard'
import LineChart from './lineChart'
import BarChart from './barChart'
import ReBarChart from './reBarChart'
import { mapState } from 'vuex'
export default {
  name: 'Analysis',
  components: {
    CommonCard,
    LineChart,
    BarChart,
    ReBarChart
  },
  computed: {
    ...mapState('home', ['homeData']),
    // salesTotal(){
    //   return `¥ ${this.homeData.salesTotal}`
    // },
    // visitTotal(){
    //   return `¥ ${this.homeData.visitTotal}`
    // }
  }
}
</script>

<style>
.week-text {
  margin-right: 10px;
}
.rechart-footer{
  font-size:14px
}
</style>
